<template>
  <div class="bundle">
    <el-container>
      <el-container>
        <el-header height="50px"><h3>特惠券包详情</h3></el-header>
        <el-main>
         <el-form ref="bundle" :model="bundle" label-width="140px">
			 <el-row >
				 基本信息：
			</el-row>
			<el-row  style="margin-top: 10px;">
				<el-col :span="7">
				<el-form-item label="特惠券包CODE：">
              		<el-input v-model="bundle.code" :disabled="true"></el-input>
				</el-form-item>
            	</el-col>
				<el-col :span="14">
				<el-form-item label="特惠券包名称：">
              		<el-input v-model="bundle.name" :disabled="true"></el-input>
				</el-form-item>
            	</el-col>
				<!-- <el-col :span="7">
				<el-form-item label="地区" prop="regionBlockCode">
              		<el-input v-model="bundle.regionBlockCode" :disabled="true"></el-input>
				</el-form-item>
            	</el-col> -->
			</el-row>
			<el-row >
				<el-col :span="7">
				<el-form-item label="特惠券包原价：">
              		<el-input v-model="bundle.originalPrice" :disabled="true"></el-input>
				</el-form-item>
            	</el-col>
				<el-col :span="7">
				<el-form-item label="特惠券包卖价：">
              		<el-input v-model="bundle.sellPrice" :disabled="true"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="7">
				<el-form-item label="特惠券包库存：">
              		<el-input v-model="bundle.inventoryQty" :disabled="true"></el-input>
				</el-form-item>
            	</el-col>
			</el-row>
			<el-row >
				<el-col :span="7">
				<el-form-item label="活动开始：">
              		<el-date-picker type="datetime" placeholder="开始日期" v-model="bundle.showTime" style="width: 100%;" :disabled="true"></el-date-picker>
				</el-form-item>
            	</el-col>
            	<el-col :span="7">
            	<el-form-item label="活动结束：">
              		<el-date-picker placeholder="结束时间" type="datetime" v-model="bundle.finishTime" style="width: 100%;" :disabled="true"></el-date-picker>
				</el-form-item>
            	</el-col>
				<el-col :span="7">
            	<el-form-item label="支付时间：">
              		<el-date-picker placeholder="支付时间" type="datetime" v-model="bundle.orderTime" style="width: 100%;" :disabled="true"></el-date-picker>
				</el-form-item>
            	</el-col>
			</el-row>
			<el-row >
				<el-col :span="7">
				<el-form-item label="设置在售或下架：">
					<el-input v-model="bundle.statusDesc" :disabled="true"></el-input>
          		</el-form-item>
            	</el-col>
            	<el-col :span="7">
            	<el-form-item label="特惠券包列表图：">
              		<el-upload
  						class="upload-demo"
  						action="http://127.0.0.1:8082/modules/web/common/upload"
  						 multiple
  						:limit="1"
						:on-success="smallFileSuccess"
						:disabled="true"
  						:file-list="smallFileList">
  						<el-button size="small" type="primary">点击上传</el-button>
  						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
            	</el-col>
				<el-col :span="7">
            	<el-form-item label="特惠券包详情图：">
              		<el-upload
  						class="upload-demo"
  						action="http://127.0.0.1:8082/modules/web/common/upload"
  						 multiple
  						:limit="1"
						:on-success="bigFileSuccess"
						:disabled="true"
  						:file-list="BigFileList">
  						<el-button size="small" type="primary">点击上传</el-button>
  						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
            	</el-col>
			</el-row>
			<el-row>
				<el-col :span="14">
				<el-form-item label="规则说明：" >
              		<el-input
  						type="textarea"
  						:rows="10"
  						placeholder="请输入内容"
  						v-model="bundle.description" :disabled="true">
					</el-input>
				</el-form-item>
				<el-col :span="7">
				</el-col>
            	</el-col>
			</el-row>
			<el-table
          :data="tableData"
          style="width: 100%">
		  <el-table-column
                  prop="couponId"
                  label="绑定券id" 
                  width="100">
          </el-table-column>
		  <el-table-column
                  prop="couponNum"
                  label="绑定券数量" 
                  width="100">
			 </el-table-column>
			<el-table-column
                  prop="couponName"
                  label="绑定券名称"
                  width="150">
                </el-table-column>
    </el-table>
         </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
import api from '@/api'
import format from '@/utils/format'
export default {
  data() {
    return {
	  currentMenu: '',
	  bundle:{},
	  id:this.$route.params.id,
	  smallFileList:[],
	  BigFileList:[],
	  tableData:[],
    };
  },
  	mounted:function(){
		console.log(this.$route.query.id);
		this.id = this.$route.query.id;
		console.log(this.id);
		this.getDetail(this.id);
	},
  methods: {
    getDetail(val) {
		api.bundle.getDetail(val).then(res => {
			 if(res.data.code=200){
				 this.bundle=res.data.data;
				 this.bundle.statusDesc= this.bundle.status==2?"在售":this.bundle.status==3?"暂停":"已下架";
				 this.bundle.originalPrice = format.toRMB(this.bundle.originalPrice);
				 this.bundle.sellPrice = format.toRMB(this.bundle.sellPrice);
				 this.tableData = res.data.data.bundleSubList;
			 }
    	})
	},
	smallFileSuccess(res, file) {
		console.log(res.data);
		this.bundle.imageSmall=res.data;
	},
	bigFileSuccess(res, file) {
		console.log(res.data);
		this.bundle.imageSmall=res.imageBig;
	},
	created(){
		console.log('test');
	},
  }
}
</script>

<style lang="scss" scoped>
	.bundle {
		.el-upload__tip {
			line-height: 1.5;
		}
	}
</style>